<!DOCTYPE html>
<html lang="en">
{% load static %}
<head>
    <meta charset="UTF-8">
    <title>拍卖后台</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'publc/datetimepicker/bootstrap-datetimepicker.min.css' %}">
    <style>
        input[type='file'] {
            min-height: 34px;
        }
    </style>
</head>
<body>
<div style="text-align: center;border: 1px solid olivedrab;width: 520px;margin: 0 auto">
    <form method="post" enctype="multipart/form-data">
        {% csrf_token %}
        {% for field in form %}
            <div class="form-group">
                <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                {{ field }}
                <span style="color: red;">{{ field.errors.0 }}</span>
            </div>
        {% endfor %}

        <button type="submit" class="btn btn-success">保存</button>
    </form>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

<script src="{% static 'publc/datetimepicker/bootstrap-datetimepicker.min.js' %}"></script>
<script src="{% static 'publc/datetimepicker/bootstrap-datetimepicker.zh-CN.js' %}"></script>
<script>
    Date.prototype.Format = function (fmt) { //author: meizz
        var o = {
            "M+": this.getMonth() + 1, //月份
            "d+": this.getDate(), //日
            "h+": this.getHours(), //小时
            "m+": this.getMinutes(), //分
            "s+": this.getSeconds(), //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds() //毫秒
        };
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    };

    $(function () {
        initDatepicker();
    });

    function initDatepicker() {
        $('#id_preview_start_time,#id_preview_end_time,#id_auction_start_time,#id_auction_end_time').datetimepicker({
            language: "zh-CN",
            minView: "hour", // month
            sideBySide: true,
            format: 'yyyy-mm-dd hh:ii',
            bootcssVer: 3,
            startDate: new Date(),
            autoclose: true
        })
    }
</script>
</body>
</html>